<template>
  <div class="system-guide-container">
    <h1 class="title">电费异常核查流程图</h1>
    <div class="content">
      <div ref="container" class="x6-graph"></div>
      <div class="legend">
        <div><span class="legend-dot manual"></span>人工校验</div>
        <div><span class="legend-dot ai"></span>智能校验</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { Graph } from '@antv/x6'
import { useRouter } from 'vue-router'

const container = ref(null)
let graph = null
const router = useRouter()

const resizeGraph = () => {
  if (container.value && graph) {
    const rect = container.value.getBoundingClientRect()
    graph.resize(rect.width, rect.height)
  }
}

onMounted(async () => {
  await nextTick()
  const rect = container.value.getBoundingClientRect()
  // console.log('=====rect.height=====', rect.height)
  graph = new Graph({
    container: container.value,
    width: rect.width < 1196 ? 1196 : rect.width,
    height: rect.height < 600 ? 600 : rect.height,
    background: { color: '#f7f7f7' },
    grid: false,
    panning: true
  })

  // 节点数据
  const nodes = [
    // 流程1&2起点
    {
      id: 'A',
      x: 80,
      y: 85,
      label: '营销2.0系统',
      shape: 'rect-dashed',
      fill: '#00c1d4',
      stroke: '#286af6',
      font: '#fff'
    },
    // 流程1
    {
      id: 'B',
      x: 400,
      y: 85,
      label: '人工判断',
      shape: 'rect-dot-green',
      fill: '#00c1d4',
      stroke: '#00c1d4',
      font: '#fff'
    },
    {
      id: 'C',
      x: 720,
      y: 85,
      label: '线下排查整改',
      shape: 'rect-dot-green',
      fill: '#00c1d4',
      stroke: '#00c1d4',
      font: '#fff'
    },
    {
      id: 'D',
      x: 1040,
      y: 85,
      label: '归档',
      shape: 'rect',
      fill: '#00c1d4',
      stroke: '#00c1d4',
      font: '#fff'
    },
    // 流程2
    {
      id: 'E',
      x: 235,
      y: 220,
      label: '获取数据',
      shape: 'rect',
      fill: '#a6d5fc',
      stroke: '#a6d5fc',
      font: '#286af6'
    },
    {
      id: 'F',
      x: 235,
      y: 375,
      label: '异常识别',
      shape: 'rect-dot-blue',
      fill: '#a6d5fc',
      stroke: '#a6d5fc',
      font: '#286af6'
    },
    {
      id: 'G',
      x: 448,
      y: 375,
      label: '生成整改工单',
      shape: 'rect',
      fill: '#a6d5fc',
      stroke: '#a6d5fc',
      font: '#286af6'
    },
    {
      id: 'H',
      x: 668,
      y: 375,
      label: '提供整改建议',
      shape: 'rect-dot-blue',
      fill: '#a6d5fc',
      stroke: '#a6d5fc',
      font: '#286af6'
    },
    {
      id: 'I',
      x: 887,
      y: 375,
      label: '录入整改说明',
      shape: 'rect',
      fill: '#a6d5fc',
      stroke: '#a6d5fc',
      font: '#286af6'
    },
    {
      id: 'J',
      x: 886,
      y: 220,
      label: '自动生成业务流程',
      shape: 'rect-dashed',
      fill: '#a6d5fc',
      stroke: '#286af6',
      font: '#286af6'
    }
    // 流程3
    // { id: 'K',  x: 90,  y: 220,  label: '营销2.0',  shape: 'rect-dashed-small',  fill: '#a6d5fc',  stroke: '#286af6',  font: '#286af6'}
  ]

  // 添加节点
  nodes.forEach((node) => {
    let markup, width, height
    if (node.shape === 'rect-dot-green' || node.shape === 'rect-dot-blue') {
      markup = [
        { tagName: 'rect', selector: 'body' },
        { tagName: 'circle', selector: 'dot' },
        { tagName: 'text', selector: 'label' }
      ]
      width = 170
      height = 44
    } else if (node.shape === 'rect' || node.shape === 'rect-dashed') {
      markup = [
        { tagName: 'rect', selector: 'body' },
        { tagName: 'text', selector: 'label' }
      ]
      width = 170
      height = 44
    } else if (node.shape === 'rect-dashed-small') {
      markup = [
        { tagName: 'rect', selector: 'body' },
        { tagName: 'text', selector: 'label' }
      ]
      width = 110
      height = 44
    } else if (node.shape === 'circle') {
      markup = [
        { tagName: 'circle', selector: 'body' },
        { tagName: 'text', selector: 'label' }
      ]
      width = 100
      height = 100
    }
    graph.addNode({
      id: node.id,
      x: node.x,
      y: node.y,
      width,
      height,
      label: node.label,
      markup,
      attrs: {
        body: {
          stroke: node.stroke,
          fill: node.fill,
          strokeWidth: 2,
          rx: 20,
          ry: 20,
          ...(node.shape === 'circle' ? { cx: 50, cy: 50, r: 50 } : {}),
          ...(node.shape === 'rect-dashed-small' ? { strokeDasharray: '6 3' } : {}),
          ...(node.shape === 'rect-dashed' ? { strokeDasharray: '6 3' } : {})
        },
        ...(node.shape === 'rect-dot-green'
          ? {
              dot: {
                fill: '#7ddfd7',
                stroke: 'none',
                r: 8,
                cx: width - 22,
                cy: 12
              }
            }
          : {}),
        ...(node.shape === 'rect-dot-blue'
          ? {
              dot: {
                fill: '#3a5ea6',
                stroke: 'none',
                r: 8,
                cx: width - 22,
                cy: 12
              }
            }
          : {}),
        label: {
          fill: node.font,
          fontSize: node.shape === 'circle' ? 14 : 16,
          fontWeight: 500,
          textAnchor: 'middle',
          refX: '50%',
          refY: '50%',
          y: null,
          x: null
        }
      }
    })
  })

  // 边数据
  const edges = [
    // 流程1：A->B->C->D（灰色实线）
    { source: 'A', target: 'B', color: '#bfbfbf', dashed: false },
    { source: 'B', target: 'C', color: '#bfbfbf', dashed: false },
    { source: 'C', target: 'D', color: '#bfbfbf', dashed: false },
    // 流程2：A->E->F->G->H->I->J->D（#286af6虚线）
    { source: 'A', target: 'E', color: '#286af6', dashed: true, vertices: [{ x: 320, y: 107 }] },
    { source: 'E', target: 'F', color: '#286af6', dashed: true },
    { source: 'F', target: 'G', color: '#286af6', dashed: true },
    { source: 'G', target: 'H', color: '#286af6', dashed: true },
    { source: 'H', target: 'I', color: '#286af6', dashed: true },
    { source: 'I', target: 'J', color: '#286af6', dashed: true },
    { source: 'J', target: 'D', color: '#286af6', dashed: true, vertices: [{ x: 970, y: 107 }] },
    // 流程3：K->E(#286af6虚线)
    { source: 'K', target: 'E', color: '#286af6', dashed: true }
  ]

  // 添加边
  edges.forEach((edge) => {
    graph.addEdge({
      source: edge.source,
      target: edge.target,
      vertices: edge.vertices,
      attrs: {
        line: {
          stroke: edge.color, // 设置边的颜色
          strokeWidth: 4, // 设置边的宽度
          targetMarker: {
            name: 'classic',
            size: 8
          },
          strokeDasharray: edge.dashed ? '10 3' : '',
          curve: 'smooth'
        }
      }
    })
  })
  graph.centerContent()
  window.addEventListener('resize', resizeGraph)

  // 节点增加点击事件，跳转到指定页面
  graph.on('node:click', ({ node }) => {
    if (node.id === 'E') {
      router.push('/electricityAbnormal/import')
    } else if (node.id === 'F') {
      router.push('/electricityAbnormal/abnormal')
    }
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeGraph)
})
</script>

<style scoped>
.system-guide-container {
  width: 100%;
  height: calc(100vh - 150px);
  min-height: 700px;
  min-width: 1196px;
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 24px;
  margin-bottom: 10px;
}
.x6-graph {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
}
.content {
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
}
.legend {
  position: absolute;
  right: 70px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.legend-dot.manual {
  background: #7ddfd7;
}
.legend-dot.ai {
  background: #3a5ea6;
}
</style>
